{extend name="public/layout" /}

{block name="content"}
<form class="layui-form" method="post" id="form" data-rules='{:json_encode($model["rules"])}' s="heheh">
    <div class="layui-form-item">
        <label for="old_password" class="layui-form-label"><span class="x-red">*</span>用户组名称</label>
        <div class="layui-input-inline">
            <input id="old_password" type="text" value="{$model['title']}" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="new_password" class="layui-form-label"><span class="x-red">*</span>描述</label>
        <div class="layui-input-inline">
            <textarea name="desc" id="" cols="30" rows="10">{$model['desc']}</textarea>
        </div>
    </div>
    <div class="layui-form-item" >
        <label for="new_password_c" class="layui-form-label"><span class="x-red">*</span>规则</label>
        <button  class="layui-btn add-btn" type="button">增加规则组</button>
    </div>  
    <div class="layui-form-item" id="last">
        <label for="L_repass" class="layui-form-label"></label>
        <button class="layui-btn" lay-filter="add" lay-submit="">提交</button>
    </div>  
</form>
{/block}

{block name="header"}
<style>
    body{
        background: #fff;
    }
</style>
{/block}

{block name="foot"}
<script>
    layui.use(['form','layer'], function(){
        console.log($)
        var form = layui.form
        form.on('submit(add)',function(data){
            var field = {
                'old_password':data.field.old_password,
                'new_password':data.field.new_password,
            }
            var index = layer.load();   
            $.ajax({
                url:data.form.action,
                data:data.field,
                type:data.form.method,
                success:function(data){
                    layer.close(index);
                    layer.alert(data.msg,{icon:data.err_code === 200?6:5,end:function(){
                        if(data.err_code === 200){
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                            parent.location.reload();
                        }
                    }});
                },
                error:function(){
                    layer.close(index);
                    layer.alert("服务器出现错误")
                }
            })
            return false;
        });
        (function(){
            function addRole(value){
                var el = '<div class="layui-form-item" >\
                            <label for="new_password_c" class="layui-form-label"></label>\
                            <div class="layui-input-inline">\
                                <input  type="text" name="rules['+(i++)+']" value="'+value+'" required lay-verify="required" autocomplete="off" class="layui-input">\
                            </div>\
                            <button class="layui-btn layui-btn-danger delete-btn" type="button">删除</button>\
                        </div>';
                el = $(el);
                el.insertBefore($('#last'))
            }
            var i = 0;
            $('.add-btn').click(function(){
                addRole("");
            });
            var rules = $('#form').data('rules');
            if(rules.length > 0){
                rules.forEach(function(value){
                    addRole(value)
                });
            }
        })();

        $('form').on('click','.delete-btn',function(){
            $(this).parent().remove()
        });
    });

</script>
{/block}